<template>
  <div>
    <el-dialog :visible.sync="addEditIsDialog_c" width="110rem !important" @close="resetForm('formName')">
      <el-form :model="ruleForm" :rules="rules" ref="formName" label-width="9rem" class="demo-ruleForm form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="鱼池：" prop="fishpondId" label-width="12rem">
              <el-select v-model="ruleForm.fishpondId" placeholder="请选择鱼池" @focus="handleChange" clearable
                :popper-append-to-body="false">
                <el-option v-for="item in fishpondSelectArray" :key="item.id" :label="item.name"
                  :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="类型：" prop="fishCode" label-width="14rem">
              <el-select @change="getFisheName" v-model="ruleForm.fishCode" placeholder="请选择类型" clearable
                :popper-append-to-body="false">
                <el-option v-for="item in fishTypesArray" :key="item.fishCode" :label="item.fishName"
                  :value="{ value: item.fishCode, label: item.id }"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="批次：" prop="batchCode" label-width="12rem">
              <el-select @change="getSex" v-model="ruleForm.batchCode" placeholder="请选择批次" clearable
                :popper-append-to-body="false">
                <el-option v-for="item in batchArray" :key="item.code" :label="item.name"
                  :value="{ value: item.code, label: item.name }"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="鱼名：" prop="fishName" label-width="12rem">
              <el-select v-model="ruleForm.fishName" placeholder="请选择鱼名" clearable :popper-append-to-body="false">
                <el-option v-for="item in fishArray" :key="item.fishName" :label="item.fishName"
                  :value="item.fishName"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="性别：" prop="sex" label-width="14rem">
              <el-select v-model="ruleForm.sex" :popper-append-to-body="false" placeholder="请选择性别" clearable>
                <el-option label="未鉴定" value="0"></el-option>
                <el-option label="雄" value="1"></el-option>
                <el-option label="雌" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="卵径：" prop="diameter" label-width="12rem">
              <el-select v-model="ruleForm.diameter" placeholder="请选择卵径" clearable :popper-append-to-body="false">
                <el-option v-for="item in diametersArray" :key="item.id" :label="item.diameter"
                  :value="item.diameter"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="数量：" prop="num" label-width="12rem">
              <el-input-number v-model="ruleForm.num" placeholder="请输入数量" :precision="0" :step="1"
                :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="初重：" prop="weightPrime" label-width="14rem">
              <el-input-number v-model="ruleForm.weightPrime" placeholder="请输入初重" :precision="6" :step="1"
                :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="均重：" prop="weightAve" label-width="12rem">
              <el-input-number disabled @change="calcWeight" v-model="weightAve" placeholder="请输入均重" :precision="6"
                :step="1" :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="总重：" prop="weight" label-width="12rem">
              <el-input-number v-model="ruleForm.weight" placeholder="请输入总重" :precision="6" :step="1"
                :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="单价：" prop="iprice" label-width="14rem">
              <el-input-number v-model="ruleForm.iprice" placeholder="请输入单价" :precision="2" :step="1"
                :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="金额：" prop="isum" label-width="12rem">
              <el-input-number v-model="ruleForm.isum" placeholder="请输入均重" :precision="6" :step="1"
                :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="原采购价：" prop="reiprice" label-width="12rem">
              <el-input-number v-model="ruleForm.reiprice" placeholder="请输入初重" :precision="2" :step="1"
                :min="0"></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="原采购金额：" prop="reisum" label-width="14rem">
              <el-input-number v-model="ruleForm.reisum" placeholder="请输入原采购金额" :precision="2" :step="1"
                :min="0"></el-input-number>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('formName')" class="btn">取 消</el-button>
        <el-button type="primary" @click="submitForm('formName')" class="btn-light-blue btn">保 存</el-button>
      </div>
    </el-dialog>
    <SelectFishpond :bindIsDialog="bindIsDialog" :companyId="companyId" :baseId="baseId"
      @selectFishData="getSelectFishData"></SelectFishpond>
  </div>
</template>
<script>
import SelectFishpond from "./selectFishpond.vue";
import { getObjDiameters } from "@/api/breeding";
import { saveDataStockInOrderDetailPad, getObjFishBatchs, getObjFishs, getObjFishTypes, getDataStockInOrderDetailPad } from "@/api/godown";
export default {
  components: {
    SelectFishpond,
  },
  props: {
    companyId: {
      type: String,
      default: "",
    },
    baseId: {
      type: String,
      default: "",
    },
    addEditId: {
      type: String,
      default: "",
    },
    stockInOrderId: {
      default: "",
    },
    addEditStatus: {
      type: String,
      default: "add",
    },
    addFishTypeIsDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      ruleForm: {
        // 表单字段
        companyId: "",
        baseId: "",
        stockInOrderId: "",
        id: "",
        fishpondId: "",
        batchCode: "",
        diameter: "",
        fishCode: "",
        fishName: "",
        iprice: "",
        isum: "",
        num: "",
        reiprice: "",
        reisum: "",
        sex: "",
        weight: "",
        weightAve: "",
        weightPrime: "",
        remark: "",
      },
      rules: {
        // 表单规则
        fishpondId: [{ required: true, message: "请选择鱼池", trigger: "change" }],
        fishName: [{ required: true, message: "请输入鱼名", trigger: "blur" }],
        batchCode: [{ required: true, message: "请选择批次", trigger: "change" }],
        sex: [{ required: true, message: "请选择性别", trigger: "change" }],
        diameter: [{ required: true, message: "请输入卵径", trigger: "blur" }],
        num: [{ required: true, message: "请输入数量", trigger: "blur" }],
        weightPrime: [{ required: true, message: "请输入初重", trigger: "blur" }],
        weightAve: [{ required: true, message: "请输入均重", trigger: "blur" }],
        weight: [{ required: true, message: "请输入总重", trigger: "blur" }],
        iprice: [{ required: true, message: "请输入单价", trigger: "blur" }],
        isum: [{ required: true, message: "请输入金额", trigger: "blur" }],
        reiprice: [{ required: true, message: "请输入原采购价", trigger: "blur" }],
        reisum: [{ required: true, message: "请输入原采购金额", trigger: "blur" }],
        remark: [{ required: false, message: "请输入备注", trigger: "blur" }],
      },
      addEditIsDialog_c: false, // 弹窗是否显示
      bindIsDialog: false, // 选择鱼池是否显示
      batchArray: [], // 批次集合
      fishArray: [], // 批次集合
      fishTypesArray: [], // 鱼类型集合
      diametersArray: [], // 卵径集合
      fishpondSelectArray: [], // 选中鱼池
    };
  },
  watch: {
    addFishTypeIsDialog(val) {
      this.addEditIsDialog_c = val;
      if (this.addEditIsDialog_c) {
        // 添加
        if (this.addEditStatus == "add") {
          this.ruleForm.id = "";
        }

        // 编辑
        if (this.addEditStatus == "edit") {
          this.ruleForm.id = this.addEditId;
          console.log(this.ruleForm.id);
          this.getDetail();
        }
        this.ruleForm.companyId = this.companyId;
        this.ruleForm.baseId = this.baseId;
        this.ruleForm.stockInOrderId = this.stockInOrderId;

        this.getObjFishBatchs();
        this.getObjFishs();
        this.getObjFishTypes();
        this.getObjDiameters();
      }
    },
  },
  computed: {
    weightAve: {
      get() {
        return this.ruleForm.weight / this.ruleForm.num;
      },
      set(newVal) {
        this.ruleForm.weightAve = newVal;
      },
    },
  },

  methods: {
    // 筛选鱼名
    getFisheName(val) {
      const { label, value } = val
      let a = { id: this.companyId, typeId: label }
      console.log(a);
      getObjFishs(a).then((res) => {
        if (res.code == 200) {
          this.fishArray = res.data;
        }
      });

    },
    // 获取性别
    getSex(val) {
      const { value, label } = val
      // console.log(val);
      console.log(label);
      if (label.includes('雄')) {
        this.ruleForm.sex = '1'
      } if (label.includes('雌')) {
        this.ruleForm.sex = '2'
      } else if (label.includes('未鉴别')) {
        this.ruleForm.sex = '0'
      }
    },
    // 计算重量
    calcWeight(val) {
      this.ruleForm.weightAve = val;
    },
    // 选择鱼池
    handleChange() {
      this.bindIsDialog = true;
    },
    // 详情
    getDetail() {
      getDataStockInOrderDetailPad({ id: this.addEditId }).then((res) => {
        if (res.code == 200) {
          res.data.sex = res.data.sex != undefined ? res.data.sex.toString() : "";
          this.ruleForm = res.data;
          this.ruleForm.batchCode = {
            value: this.ruleForm.batchCode
          }
          this.ruleForm.fishCode = {
            value: this.ruleForm.fishCode
          }
        }
      });
    },
    // 提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.batchCode = this.ruleForm.batchCode.value
          this.ruleForm.fishCode = this.ruleForm.fishCode.value
          saveDataStockInOrderDetailPad(this.ruleForm).then((res) => {
            if (res.code == 200) {
              // 返回数据
              this.$emit("backData", res.data);
              this.$message({
                type: "success",
                message: res.msg,
              });

              // 关闭弹窗
              this.$parent.closeAddEdit();
              // 刷新列表
              this.$parent.getDetail();
            }
          });
        }
      });
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$parent.closeAddEdit();
    },
    // 弹窗关闭
    closeBind() {
      this.bindIsDialog = false;
    },
    // 获取批次列表
    getObjFishBatchs() {
      getObjFishBatchs({ id: this.companyId }).then((res) => {
        if (res.code == 200) {
          this.batchArray = res.data;
        }
      });
    },
    // 获取鱼档案列表
    getObjFishs() {
      getObjFishs({ id: this.companyId }).then((res) => {
        if (res.code == 200) {
          this.fishArray = res.data;
        }
      });
    },
    // 获取类型列表
    getObjFishTypes() {
      getObjFishTypes({ id: this.companyId }).then((res) => {
        if (res.code == 200) {
          this.fishTypesArray = res.data;
        }
      });
    },
    // 获取卵径列表
    getObjDiameters() {
      getObjDiameters().then((res) => {
        if (res.code == 200) {
          this.diametersArray = res.data;
        }
      });
    },
    // 选择鱼池信息
    getSelectFishData(data) {
      this.ruleForm.fishpondId = data.id;
      this.fishpondSelectArray.push(data);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .el-dialog__footer {
  text-align: center;
}

/deep/ .el-dialog__close {
  display: none !important;
}

/deep/.el-dialog__body {
  font-size: 1.86rem !important;
  width: 100%;
}

.demo-ruleForm {
  width: 95%;
  margin: 0 auto;
  padding-top: 10px;
}

.el-cascader {
  width: 100%;
}

.el-select {
  width: 100%;
}

.form {
  width: 100%;
  height: 53rem;

  /deep/.el-form-item__content {
    line-height: 4.857143rem;
  }

  /deep/.el-form-item {
    margin-bottom: 4.79rem;
  }

  /deep/.el-input__inner {
    width: 20.64rem;
    height: 5rem;
    font-size: 1.86rem;
  }

  /deep/.el-form-item__label {
    font-size: 1.86rem;
    line-height: 5rem;
  }

  /deep/ .el-input-number {
    width: 20.857143rem;
    line-height: 4.814286rem;

    .el-input-number__decrease,
    .el-input-number__increase {
      width: 4.857143rem;
    }
  }

  ::v-deep .el-select-dropdown__empty {
    padding: 0.814286rem 3.3rem;
    font-size: 2rem;
  }

  ::v-deep .el-select-dropdown__list {
    .el-select-dropdown__item {
      font-size: 2rem;
      height: 4.428571rem;
      line-height: 4.428571rem;
    }
  }
}

.btn {
  width: 8.65rem;
  height: 4.48rem;
  font-size: 2.19rem;
}
</style>
